<template>
	<div class="icons">
		<swiper :options="swiperOption">
    	<swiper-slide v-for="(page,index) in pages" :key="index">
		<div class="icon" v-for="item in page" :key="item.id">
			<div class="icon-img">
				<img :src="item.imgUrl"/>
			</div>
			<p>{{item.desc}}</p>
		</div>
		</swiper-slide>
		 <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				swiperOption: {
					pagination: ".swiper-pagination"
				},
				iconList: [{
					id:"0001",
					imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
					desc:"景点门票"
				},{
					id:"0002",
					imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
					desc:"广州必游"
				},{
					id:"0003",
					imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
					desc:"动植物园"
				},{
					id:"0004",
					imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png",
					desc:"游乐场"
				},{
					id:"0005",
					imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png",
					desc:"珠江夜游"
				},{
					id:"0006",
					imgUrl:"https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
					desc:"打卡圣地"
				},{
					id:"0007",
					imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
					desc:"一日游"
				},{
					id:"0008",
					imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
					desc:"泡温泉"
				},{
					id:"0009",
					imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png",
					desc:"玩转长隆"
				},
				{
					id:"0010",
					imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png",
					desc:"全部玩乐"
				}]
			}
		},
		computed: {
			pages () {
				const pages=[];
				this.iconList.forEach((item,index)=>{
					const page=Math.floor(index / 8);
					if(!pages[page]){
						pages[page]=[]
					}
					pages[page].push(item)
				})
				return pages
			}
		}
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	@import "../assets/scss/mixins.scss";
	$fs:64px;
	html{
	    font-size: $fs;
	}
	@function r($px){
	    @return $px/$fs*1rem;   
		
	}
	.icons /deep/ .swiper-container{
		width: 100%;
		height: 0;
		padding-bottom: 55%;
	}
	.icons /deep/ .swiper-pagination-bullets{
		bottom: r(-12px);
		.swiper-pagination-bullet{
			width: r(12px);
			height: r(12px);
			background: rgba(0,175,190,.8);
		}
	}	
		.icons{
				margin-top: r(10px);
			.icon{
				position: relative;
				overflow: hidden;
				float: left;
				width: 25%;
				padding-bottom: 25%;
				.icon-img{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: r(44px);
					>img{
						height: 100%;
						display: block;
						margin: 0 auto;
					}
				}
				>p{
					font-size: r(28px);
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: r(44px);
					line-height: r(44px);
					text-align: center;
					color: #333;
					@include ellipsis();
				}
			}
	}	
</style>